<template>
  <div class="wrap">
    <div class="headerBoxList">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 4V44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M42 4V44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M14 15H34" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M14 33H42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span style="margin-left: 10px">开关机时间</span>
    </div>

    <div class="content">

      <div class="glass-card">

        <div v-if="startTime" class="time-block">
          <div class="icon-box start">
            <i class="icon-power"></i>
          </div>
          <div class="info">
            <div class="title">开机时间</div>
            <div class="time">{{ formateTime(startTime) }}</div>
          </div>
        </div>

        <div class="split-line" v-if="endTime"></div>

        <div v-if="endTime" class="time-block">
          <div class="icon-box end">
            <i class="icon-shutdown"></i>
          </div>
          <div class="info">
            <div class="title">关机时间</div>
            <div class="time">{{ formateTime(endTime) }}</div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

  
  <script>
import { parseTime } from "@/utils/index";

export default {
  name: "startTime2",
  props: ['sendData'],
  data() {
    return {
      startTime: '',
      endTime: ''
    }
  },
  watch: {
    '$store.state.account.basePhone3': function () {
      this.handleContent();
    }
  },
  created() {
    this.handleContent();
  },
  mounted() {
    this.handleContent();
  },
  methods: {
    handleContent() {
      const content = this.sendData?.content || "";

      if (!content) return;
      
      // 如果包含 "_"
      if (content.includes("_")) {
        const arr = content.split("_");
        this.startTime = arr[0] || "";
        this.endTime = arr[1] || "";
      } else {
        this.startTime = content;
        this.endTime = "";
      }
    },
    formateTime(date) {
      return parseTime(Number(date));
    }
  }
}
</script>
<style scoped>
.wrap{
  width:100%;
  padding:10px;
}

.headerBoxList{
  width:100%;
  height:50px;
  border-bottom: 1px solid #d2d2d2;
  display:flex;
  align-items:center;
  font-size:18px;
  font-weight:bold;
}

.content{
  height:84vh;
  margin-top:20px;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}



.glass-card{
  width:650px;
  max-width:92%;
  padding:40px 36px;
  border-radius:20px;
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);

  /* 霓虹边框渐变描边 */
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    0 0 15px rgba(0,170,255,0.4);

  display:flex;
  flex-direction:column;
  gap: 26px;
  transition: all .28s;
}
.glass-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 8px 30px rgba(0,0,0,0.25),
    0 0 18px rgba(0,170,255,0.55);
}


/* ✅ 单条 */
.time-block{
  display:flex;
  align-items:center;
  gap:18px;
  animation:fadein .3s ease;
}

/* ✅ 图标 */
.icon-box{
  width:52px;
  height:52px;
  border-radius:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.icon-box.start{
  border: 1px solid rgba(0,255,120,0.65);
}
.icon-box.end{
  border: 1px solid rgba(255,75,75,0.65);
}

/* 你可替换为正式图标 */
.icon-box i{
  font-size:26px;
  color:#fff;
}

.icon-power::before{
  content:"⚡";
}
.icon-shutdown::before{
  content: "";
  width: 26px;
  height: 26px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%23ff4b4b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M24 4V24'/><path d='M12.544 12.544C8.436 16.653 6 22.116 6 28c0 9.941 8.059 18 18 18s18-8.059 18-18c0-5.884-2.436-11.347-6.544-15.456'/></svg>");
}


/* ✅ 信息 */
.info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.title{
  font-size:15px;
  color:#bbb;
  letter-spacing:0.5px;
}
.time{
  font-size:24px;
  font-weight:600;
  color:#373737;
  text-shadow:0 0 8px rgba(255,255,255,0.3);
}


/* ✅ 分割线 */
.split-line{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.4), rgba(255,255,255,0.05));
}


/* 进入动画 */
@keyframes fadein{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

@media screen and (min-width:2360px){
  .content{ height:80vh; }
}
@media screen and (min-width:2561px){
  .content{ height:66vh; }
}
</style>
